import {
  AfterContentInit, AfterViewInit, ChangeDetectorRef,
  Component, ContentChild, ElementRef, EventEmitter,
  Input, OnInit, Output, Renderer2, TemplateRef, ViewChild,
  OnChanges, SimpleChanges, DoCheck, AfterContentChecked,
  AfterViewChecked,
  ViewChildren, QueryList
} from '@angular/core';
import { Istudent } from 'src/app/istudent';

@Component({
  selector: 'app-student-foot',
  templateUrl: './student-foot.component.html',
  styleUrls: ['./student-foot.component.scss']
})
export class StudentFootComponent implements OnInit, OnChanges, DoCheck,
  AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked {
  deleteStudent(_t3: any) {
    throw new Error('Method not implemented.');
  }

  constructor(private cdr: ChangeDetectorRef, private renderer: Renderer2) {

  }


  @Input()
  student!: Istudent;

  zongchegnji: number = 0;
  pingjun: number = 0;
  tbgcolor:string="green";
  tcolor:string="white";
  showhight=true;

  ngOnChanges(value: SimpleChanges) {
    console.log("student-foot-ngOnChanges");
    console.log(value);
  }

  ngOnInit(): void {
    console.log("student-foot-ngOnInit__OnlyOnce");

  }
  ngDoCheck(): void {
    console.log("student-foot-ngDoCheck");
  }


  // 这里的@ContentChild('custompingding')装饰器告诉Angular框架，我们要获取一个投影，名为custompingding的模板引用
  @ContentChild('custompingding') custompingdingTemplate: TemplateRef<any> | undefined;
  @ContentChild('spanname') spanElement: ElementRef<any> | undefined;
  ngAfterContentInit(): void {
    console.log("student-foot-ngAfterContentInit_OnlyOnce");
    console.log(this.spanElement);

    if (this.spanElement) {
      this.renderer.setStyle(this.spanElement.nativeElement, 'color', 'green');
      this.renderer.setStyle(this.spanElement.nativeElement, 'font-weight', 'bold');
    }

    //  this.children.forEach(child => {
    //   // 访问子组件的属性和方法
    //   console.log(child.someProperty);
    //   child.someMethod();
    // });
  }
  ngAfterContentChecked(): void {
    console.log("student-foot-ngAfterContentChecked");
  }


  temptemplate: TemplateRef<any> | undefined;
  @ViewChild('good') goodTemplate: TemplateRef<Istudent> | undefined;
  @ViewChild('nogood') nogoodTemplate: TemplateRef<Istudent> | undefined;
  @ViewChildren('message') messages: QueryList<ElementRef> | undefined;
  ngAfterViewInit(): void {
    console.log("student-foot-ngAfterViewInit_OnlyOnce");


  }
  ngAfterViewChecked() {
    console.log("student-foot-ngAfterViewContentChecked");
    console.log(this.messages?.get(0)?.nativeElement.value);
    // 在ngAfterViewInit生命周期钩子中，可以访问组件的实例
    // 报错：ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: 
    // Expression has changed after it was checked. Previous value: 'undefined'. 
    // Current value: '[object Object]'. Expression location:

    // 我的代码中 temptemplate默认应该是undefined，
    // 然后在ngAfterViewInit中有把它改变了，所以报错了对吗？

    // 15:47
    // 是的，
    // 你分析得正确。在Angular中，如果你在模板中使用了一个变量（如this.temptemplate），
    // 而这个变量在某个变更检测周期中从undefined变为另一个值（例如从undefined变为一个TemplateRef实例），
    // 并且这个变化发生在变更检测周期认为已经“安定”下来之后，
    // 那么Angular就会抛出ExpressionChangedAfterItHasBeenCheckedError错误。

    // 解决方案
    //  this.cdr.detectChanges(); // 手动触发变更检测
    this.zongchegnji = this.student ? (this.student.shuxue + this.student.yuwen + this.student.yinyu) : 0;
    this.pingjun = this.zongchegnji / 3;
   
    //平均成绩》60 用goodTemplate，反之用nogoodTemplate
    if (this.pingjun > 60) {
      if (this.goodTemplate)
        this.temptemplate = this.goodTemplate;
        this.tbgcolor='green';
    } else {
      if (this.nogoodTemplate)
        this.temptemplate = this.nogoodTemplate;
        this.tbgcolor='red';
    }

    // if (this.custompingdingTemplate) {
    //   console.log(this.custompingdingTemplate);
    // }
    // 解决方案 或者其它
    this.cdr.detectChanges(); // 手动触发变更检测
  }

  // @Output自定义事件绑定
  @Output()
  selectClick: EventEmitter<Istudent> = new EventEmitter<Istudent>();

  // 点击事件 选中学生
  studentImgClick(item: Istudent) {
    this.selectClick.emit(item);
  }
}
